<template>
	<div class="app-container">
		<div class="main-content">
			<div class="right-content">
				<!-- 面包屑导航 -->
				<el-breadcrumb separator="/">
					<el-breadcrumb-item>首页</el-breadcrumb-item>
					<el-breadcrumb-item>数据面板</el-breadcrumb-item>
				</el-breadcrumb>

				<!-- 统计数字卡片 -->
				<div class="stats-cards">
					<el-card class="stats-card" v-for="stat in statsList" :key="stat.name">
						<h3>{{ stat.name }}</h3>
						<p>{{ stat.value }}</p>
					</el-card>
				</div>
				<!-- 医生职级柱状图 -->
				<div class="chart-container">
					<el-card>
						<h3>医生职级</h3>
						<div class="bar-chart">
							<div class="bar" v-for="(level, index) in doctorLevelStats" :key="index" :style="{ 
				          height: `${level.percentage}px`, 
				          background: level.color  // 使用映射后的颜色
				        }">
								<span>{{ level.level }}</span> <!-- 显示映射后的名称 -->
							</div>
						</div>
					</el-card>
				</div>
				<!-- 医院科室和最新政策 -->
				<div class="bottom-modules">
				  <el-card class="module-card">
				    <h3>医院科室</h3>
				    <div class="科室-item">
				      <span class="color-red">肝脏</span>
				    </div>
				    <div class="科室-item">
				      <span class="color-blue">腹部</span>
				    </div>
				  </el-card>
				  <el-card class="module-card">
				    <h3>最新政策</h3>
				    <p>最新医保政策</p>
				    <p>门诊报销携带资料：门诊发票、合作医疗证历本（或病历）。</p>
				    <a href="#" class="more-link">More>></a>
				  </el-card>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// 引入统一API模块（根据项目实际路径调整）
	import api from '@/api'; // 假设api模块已正确封装

	export default {
		name: 'App',
		data() {
			return {
				statsList: [], // 统计卡片数据（对应后端/api/dashboard/stats）
				doctorLevelStats: [], // 医生职级统计数据（对应后端/api/dashboard/doctors/levelcount）
				loadingStats: false, // 统计卡片加载状态
				loadingDoctorLevel: false, // 医生职级加载状态
				// 新增：职级ID与名称的映射（根据实际业务调整）
				levelMap: {
					1: '主任医师', // level_id=1对应主任医师
					2: '普通医师', // level_id=2对应普通医师
					3: '实习医师' // level_id=3对应实习医师
				},
				// 新增：职级ID与颜色的映射（与示例中的颜色一致）
				colorMap: {
					1: 'green',
					2: 'blue',
					3: 'orange'
				}

			};
		},
		mounted() {
			this.fetchStatsData(); // 加载统计卡片
			this.fetchDoctorLevelData(); // 加载医生职级数据
		},
		methods: {
			// 1. 统计卡片接口调用（保持原有逻辑，仅修改api调用方式）
			async fetchStatsData() {
				try {
					this.loadingStats = true;
					// 通过api模块调用接口（对应后端/api/dashboard/stats）
					const res = await api.city.getStats(); // 关键修改点：使用api模块
					if (res.code === 0) {
						// 直接使用后端返回的List<Statsvo>（Statsvo包含name和value字段）
						this.statsList = res.data; // 假设res.data是List<Statsvo>
					} else {
						this.$message.error(res.message || '获取统计数据失败');
					}
				} catch (error) {
					console.error('统计卡片请求出错:', error);
					this.$message.error('统计卡片加载失败，请稍后重试');
				} finally {
					this.loadingStats = false;
				}
			},

			// 2. 医生职级统计接口调用（保持原有逻辑，仅修改api调用方式）
			async fetchDoctorLevelData() {
				try {
					this.loadingDoctorLevel = true;
					const res = await api.city.getDoctorLevelStats();
					if (res.code === 0) {
						const data = res.data; // 假设后端返回：[{ level_id: 1, count: 10 }, { level_id: 2, count: 8 }, ...]
						const maxCount = Math.max(...data.map(item => item.count));

						// 关键修改：将level_id转换为名称和颜色
						this.doctorLevelStats = data.map(item => ({
							level: this.levelMap[item.level_id] || `未知职级${item.level_id}`, // 映射名称（兜底未知情况）
							percentage: (item.count / maxCount) * 200, // 保持高度计算逻辑
							color: this.colorMap[item.level_id] || '#909399' // 映射颜色（兜底灰色）
						}));
					} else {
						this.$message.error(res.message || '获取医生职级数据失败');
					}
				} catch (error) {
					console.error('医生职级请求出错:', error);
					this.$message.error('医生职级加载失败，请稍后重试');
				} finally {
					this.loadingDoctorLevel = false;
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.app-container {
		width: 100%;
		height: 100vh;
		background-color: #f0f2f5;

		.top-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
			height: 60px;
			background-color: #fff;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

			.logo {
				display: flex;
				align-items: center;

				img {
					width: 40px;
					height: 40px;
					margin-right: 10px;
				}

				span {
					font-size: 18px;
					font-weight: bold;
				}
			}

			.user-info {
				span {
					margin-right: 10px;
				}

				a {
					color: #128277;
					text-decoration: none;
				}
			}
		}

		.main-content {
			display: flex;
			height: calc(100vh - 60px);

			.left-nav {
				width: 200px;
				background-color: #128277;

				.el-menu {
					border-right: none;
				}
			}

			.right-content {
				flex: 1;
				padding: 20px;
				background-color: #fff;

				.el-breadcrumb {
					margin-bottom: 20px;
				}

				.stats-cards {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20px;

					.stats-card {
						width: 24%;
						text-align: center;

						h3 {
							font-size: 16px;
							margin-bottom: 10px;
						}

						p {
							font-size: 24px;
							color: #128277;
						}
					}
				}

				.chart-container {
					margin-bottom: 20px;

					.bar-chart {
						display: flex;
						justify-content: space-around;
						align-items: flex-end;
						height: 200px;
						padding: 20px;

						.bar {
							width: 30%;
							text-align: center;

							span {
								display: block;
								margin-top: 10px;
							}
						}
					}
				}

				.bottom-modules {
					display: flex;
					justify-content: space-between;

					.module-card {
						width: 49%;

						h3 {
							font-size: 16px;
							margin-bottom: 10px;
						}

						.科室-item {
							margin-bottom: 5px;

							.color-red {
								color: red;
							}

							.color-blue {
								color: blue;
							}
						}

						.more-link {
							display: block;
							text-align: right;
							color: #128277;
							text-decoration: none;
							margin-top: 10px;
						}
					}
				}
			}
		}
	}
</style>